<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="format-detection" content="telephone=no"/>
  <meta name="format-detection" content="email=no"/>
  <title>订单详情</title>
  <link rel="stylesheet" href="../../css/api.css">
  <link rel="stylesheet" href="../../css/vant.css">
  <link rel="stylesheet" href="../../css/main.css">
  <style></style>
</head>

<body>
<div class="app" >
  <div class="lineGrey"></div>
  <div class="iphonex-padding-bottom">
    <div class="cart-detail-area">
      <div class="top">
        <div>
          <div class="title">
            <span>{{orderDetail.consignee}}</span>
            <span>{{orderDetail.phone}}</span>
          </div>
          <div>{{orderDetail.areaName}} {{orderDetail.address}}</div>
        </div>
      </div>
    </div>
    <div class="cart-detail-order-list">
      <div class="cart-detail-order-item">
        <div>{{orderDetail.shopName}}</div>
        <div v-for="(item,index) in orderDetail.orderItems" :key="index">
          <div class="cart-detail-order-info flex-x-s">
            <img :src="item.imageUrl?item.imageUrl:'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/default/item_img.png'" alt="">
            <div class="info">
              <div class="title">{{item.name}}</div>
              <div class="money"><span>¥</span> {{Number(item.price).toFixed(2)}}</div>
            </div>
            <div>× {{item.quantity}}</div>
          </div>
          <div class="cart-detail-order-discount flex-x-sb">
            <div class="cart-detail-order-discount-info">
              <span>商品优惠</span>
            </div>
            <div>- ¥ {{Number(item.discount).toFixed(2)}}</div>
          </div>
        </div>
        <div class="cart-detail-order-discount flex-x-sb">
          <div class="cart-detail-order-discount-info">
            <span>店铺优惠</span>
          </div>
          <div>- ¥ {{Number(orderDetail.shopDiscount).toFixed(2)}}</div>
        </div>
        <div class="cart-detail-order-discount flex-x-sb">
          <div class="cart-detail-order-discount-info">
            <span>平台优惠</span>
          </div>
          <div>- ¥ {{Number(orderDetail.platformDiscount).toFixed(2)}}</div>
        </div>
        <div class="cart-detail-order-total">
          总计：¥ {{(Number(orderDetail.orderAmount) ).toFixed(2)}}
        </div>
      </div>
    </div>
    <div class="cart-order-info">
      <div class="cart-order-info-title flex-x-sb">
        <div>订单信息</div>
        <div>{{orderDetail.statusText}}</div>
      </div>
      <div class="cart-order-info-item flex-x-s">
        <div>订单号</div>
        <div>{{orderDetail.sn}}</div>
      </div>
      <div class="cart-order-info-item flex-x-s">
        <div>创建时间</div>
        <div>{{orderDetail.createTime | handleTime}}</div>
      </div>
      <div class="cart-order-info-item flex-x-s" v-if="orderDetail.paidTime">
        <div>支付时间</div>
        <div>{{orderDetail.paidTime | handleTime}}</div>
      </div>
    </div>
  </div>
</div>
<script src="../../script/api.js"></script>
<script src="../../script/flexible.js"></script>
<script src="../../script/vue.min.js"></script>
<script src="../../script/iconfont.js"></script>
<script src="../../script/fastclick.js"></script>
<script src="../../script/vant.min.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/restful.js"></script>
<script src="../../script/businessCommon.js"></script>

<script>
  apiready = function () {
    vm = new Vue({
      el: '.app',
      data: {
        id: api.pageParam.id,
        orderDetail: {
          shopDiscount: '',
          platformDiscount: '',
          productDiscount: '',
          totalAmount: '',
          orderAmount: ''
        }
      },
      filters: {
        handleTime(timestamp) {
          if (!timestamp) {
            return ''
          }
          var date = new Date(timestamp);
          Y = date.getFullYear();
          M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
          D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
          h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours());
          m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes());
          s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
          return Y + '.' + M + '.' + D + ' ' + h + ':' + m + ':' + s
        }
      },
      created() {
      },
      mounted() {
        this.getOrderDetail();
      },
      methods: {
        getOrderDetail() {
          const vm = this;
          order('getShopOrderDetail')(vm.id, function (ret) {
            vm.orderDetail = ret.data
          })
        }
      },
    })
  }
</script>
</body>

</html>